<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        
    </div>
    <script src="../vuejs/vue.js"></script>
    <script>
        Vue.config.productionTip = false
        new Vue({
            el : '#app',
            data() {
                return {
                    opacity : 1,
                    name :'geekrose'
                }
            },
            // 模板里只能有一个根元素
            // 如果使用tempate选项添加模板 会替代 el里绑定的模板
            // 这里不能使用template标签作为根元素（template不参与元素层级结构）
            template:`<div>
                <h2 :style="{opacity}">欢迎学习Vue</h2>
                {{name}}    
                <br/>
                <button @click="stop">点我停止变换</button>
            </div>    
            `,
            methods: {
                stop () {
                    this.$destroy()
                }
            },
            beforeCreate() {
                // 创建之前
                // 初始化生命周期 事件
                console.log("beforeCreate");
                // debugger;
            },
            created() {
                console.log("created");

                // 数据监测 数据代理
            },
            beforeMount() {
                // 挂载前
                console.log("beforeMount");
                console.log(this);

                // 这个环节是 刚解析完 存在虚拟DOM 还没转成真实DOM
            },
            // 挂载完毕 完成模板的解析并真实DOM放入页面时调用
            mounted(){
                // this指向vm
                // 只调用一次
                console.log("mounted",this.$el);
                // debugger

                this.timer = setInterval(() => {
                    this.opacity -= 0.01
                    if (this.opacity <= 0) {
                        this.opacity = 1
                    }
                }, 16);
                // 通常在这里进行操作
                /*
                    1.开启定时器
                    2.发送网络请求
                    3.订阅消息
                    4.绑定自定义事件
                */
            },
            // 至此初始化完成
            beforeUpdate() {
                // 改之前
                // 这里数据是新的 但是页面是旧的
            },
            updated() {
                // 改之后
                // 这里数据是新的 页面也是新的
            },
            // 当vm.$destroy() 完全销毁一个实例 清理它与其他实例（组件实例对象）的连接
            // 接触它的全部指令及（自定义）事件监听器
            beforeDestroy() {
                // 销毁前
                // 此时data methods 指令等都处于可用状态
                // 通常在这里关闭定时器 取消订阅信息 解绑自定义事件等
                clearInterval(this.timer)

                // 能访问数据 能调用方法 但是触发的修改不会再执行了
            },
            destroyed() {
                // 销毁后
            },
            

        })
    </script>
</body>
</html>